<template>
  <div class="hore-add">
    <h3>添加英雄</h3>
    <hr />
    <div class="form-group">
      <label class="col-sm-2 control-label">英雄名称</label>
      <div class="col-sm-10">
        <input v-model="form.name" type="text" class="form-control" style="width:200px" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">英雄性别</label>
      <div class="col-sm-10">
        <input type="radio" value="男" v-model="form.gender" /> 男
        <input type="radio" value="女" v-model="form.gender" /> 女
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button class="btn btn-primary" @click="add">添加</button>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from "axios"
export default {
  data() {
    return {
      form: {
        name: "",
        gender: "男",
      },
    };
  },
  methods: {
    add() {
      // 完成添加逻辑  提交表单
      Axios.post("http://localhost:6005/heroList", {
        name: this.form.name,
        gender: this.form.gender,
        time: new Date(),
      }).then((res) => {
        // 跳回到heroList列表
        this.$router.push({
          path:'/heroList'
        })
      })
    }
  }
};
</script>

<style>
</style>